<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.aaa{
				width: 300px;
				height: 200px;
				background:linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5)
				,rgba(75,192,200,0.5));
				transition: width 2s linear 0.5s;
			}
			.aaa:hover{
				width: 800px;
			}
			
			.bbb{
				width: 200px;
				height: 200px;
				background:linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5)
				,rgba(75,192,200,0.5));
				margin-top: 50px;
			}
			.bbb:hover{
				transform: rotate(45deg);
			}
			
			.ccc{
				width: 200px;
				height: 200px;
				background:linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5)
				,rgba(75,192,200,0.5));
				margin-top: 50px;
				border-radius: 50%;
				animation: kkk 5s linear 0s infinite alternate;
			}
			
			@keyframes kkk{
				from{
					width: 50px;
				    height: 50px;
				}
				to{
					500px;
					500px;
				}
			}
		</style>
	</head>
	<body>
		<div class="aaa"></div>
		<div class="bbb"></div>
		<div class="ccc"></div>
	</body>
</html>
